<template>
  <el-dialog
    :title="title"
    :visible="dialogVisible"
    width="30%"
    @close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item :label="formDate.sel==='many'?'动态参数':'静态属性'" prop="attr_name">
        <el-input v-model="form.attr_name" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="addAttributes">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { postAddAttributes, putGoodsAttributes } from '@/api/Taxonomies.js'
export default {
  name: 'ElasticLayer',
  props: {
    // 关闭弹出
    dialogVisible: {
      type: Boolean,
      required: true
    },
    // 数据
    formDate: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      form: {
        cat_id: 0,
        attr_name: '',
        attr_sel: '',
        attr_vals: ''
      },
      // 判断输入框文字
      title: '',
      // 输入框正则
      rules: {
        attr_name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },

  created() {
    this.open()
  },

  methods: {
    open() {
      if (this.formDate.sel === 'many') {
        if (!this.formDate.attrParameter) {
          this.title = '添加动态参数'
        } else {
          this.title = '编辑动态参数'
          this.form = { ...this.formDate.attrParameter }
        }
      } else {
        if (!this.formDate.attrParameter) {
          this.title = '添加静态属性'
        } else {
          this.title = '编辑静态属性'
          this.form = { ...this.formDate.attrParameter }
        }
      }
    },
    // 关闭相关
    handleClose() {
      this.$refs.form.resetFields()
      this.$emit('update:dialogVisible', false)
    },
    // 确定添加
    async addAttributes() {
      await this.$refs.form.validate()
      this.form.attr_sel = this.formDate.sel
      this.form.cat_id = this.formDate.id
      try {
        if (this.form.attr_id) {
          await putGoodsAttributes(this.form)
          this.$message.success('修改成功')
          this.$emit('update:dialogVisible', false)
          this.$emit('onAddClick')
        } else {
          await postAddAttributes(this.form)
          this.$emit('update:dialogVisible', false)
          this.$message.success('添加成功')
          this.$emit('onAddClick')
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang='less'>

</style>
